<!--
 * @Author: zhangchaosen
 * @Date: 2024-06-14 17:25:29
 * @LastEditors: zhangchaosen
 * @LastEditTime: 2024-06-17 11:20:35
 * @Description: 考生信息页面
-->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { FormInstance } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'

import { genderOptions } from '@/constants/common'
import { usePagingQuery } from '@/hooks/web/use-paging-query'

defineOptions({
  name: 'ExamineeInfoPage'
})

// 分页查询
const listQuery = ref<any>({
  gender: 0
})

// 调用分页列 hooks
const { getPagingList, loading, pageQuery, totalCount } = usePagingQuery<any, any>(listQuery, async () => {})

// 表格数据
const tableData = ref<any[]>([])
// form ref
const searchFormRef = ref<FormInstance>()

/**
 * 获取列表
 */
const getList = async () => {
  try {
    await getPagingList()
  } catch (error) {
    console.log(error)
    tableData.value = []
  }
}

/**
 * 分页查询
 */
const handleSearch = () => {
  pageQuery.value.current = 1
  getList()
}

/**
 * 搜索栏--重置方法
 */
const handleReset = () => {
  searchFormRef.value?.resetFields()
  listQuery.value.userId = undefined
  handleSearch()
}

/**
 * 分页列表--每页显示数量改变时触发
 */
const pageSizeChange = () => {
  handleSearch()
}

onMounted(() => {
  handleSearch()
})
</script>
<template>
  <div class="page-container">
    <!-- 搜索栏 -->
    <div class="page-header card">
      <div class="search-content">
        <!-- 左侧--搜索条件 -->
        <el-form class="search-form" :model="listQuery" ref="searchFormRef">
          <el-form-item label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:" prop="studentGender">
            <el-select v-model="listQuery.gender" placeholder="请选择性别" clearable>
              <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>

        <!-- 右侧--按钮 -->
        <div class="search-button">
          <div class="button-box">
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button :icon="Refresh" @click="handleReset">重置</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页列表 -->
    <div class="page-content card">
      <div class="table-content">
        <!-- 表单头部 -->
        <div class="operate-box">
          <!-- 左侧--表单名称 -->
          <div class="table-name">学生列表</div>

          <!-- 右侧--操作按钮区 -->
          <div class="flex items-center">
            <el-button type="primary" :icon="Download">导出记录</el-button>
          </div>
        </div>

        <!-- 页面主体--el-table -->
        <div class="main-table">
          <el-table v-loading="loading" :data="tableData" style="width: 100%; height: 100%" border>
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="60" label="序号" />
          </el-table>
        </div>
      </div>

      <!-- 分页--组件 -->
      <Pagination
        :total="totalCount"
        v-model:page="pageQuery.current"
        v-model:limit="pageQuery.size"
        @page-size-change="pageSizeChange"
        @pagination="getList"
      />
    </div>
  </div>
</template>
